<template>
  <div>
    <el-container class="layout">
      <el-container class="main">
        <el-header class="header">
          <el-container>
            <div class="header-left">
              <div class="icon">

              </div>
              <div style="width: 500px; line-height: 60px;"><span>PlumeCache</span></div>
            </div>
            <div class="header-right">
              <a href="https://gitee.com/plumeorg/plumecache" target="_blank"> 主 页</a>
              <a href="https://gitee.com/plumeorg/plumecache" target="_blank"> Version 1.0</a>
            </div>
          </el-container>
        </el-header>
        <el-main class="content">
          <el-scrollbar class="scroll">
            <el-card>
              <el-table
                  :data="tableStore">
                <el-table-column
                    prop="properties.name"
                    label="Name"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="properties.type"
                    label="Type"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="properties.endpoint"
                    label="Endpoint">
                </el-table-column>
                <el-table-column
                    prop="properties.prefix"
                    label="prefix"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="operation"
                    width="200">
                  <template slot-scope="scope">
                    <el-button @click="handleStatistics(scope.row)" type="text" size="small">statistics</el-button>
                    <el-button @click="handleExecute(scope.row)" type="text" size="small">execute</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
    <Execute ref="execute"/>
    <Statistics ref="statistics"/>
  </div>
</template>

<script>

import {listNodes, getStatistics} from '../api'
import Execute from "@/components/Execute";
import Statistics from "@/components/Statistics";
import Index from '@/views/Index'

export default {
  name: 'App',
  components: {Execute, Statistics, Index},
  data: function () {
    return {
      tableStore: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleStatistics(row) {
      this.$refs.statistics.show(row.statistics)
    },
    handleExecute(row) {
      this.$refs.execute.show(row)
    },
    init() {
      listNodes().then(res => {
        this.tableStore = res
      })
    }
  }
}
</script>

<style>
.el-progress {
  width: 85%;
}
</style>
